{% extends "base.html" %}
{% load event_tags %}
{% load display_tags %}
{% load i18n %}
{% load static %}
{% block add_styles %}
    {{ block.super }}
    .tabs-below > .nav-tabs,
    .tabs-right > .nav-tabs,
    .tabs-left > .nav-tabs {
    border-bottom: 0;
    }

    .tab-content > .tab-pane,
    .pill-content > .pill-pane {
    display: none;
    }

    .tab-content > .active,
    .pill-content > .active {
    display: block;
    }

    .tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
    }

    .tabs-below > .nav-tabs > li {
    margin-top: -1px;
    margin-bottom: 0;
    }

    .tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    }

    .tabs-below > .nav-tabs > li > a:hover,
    .tabs-below > .nav-tabs > li > a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
    }

    .tabs-below > .nav-tabs > .active > a,
    .tabs-below > .nav-tabs > .active > a:hover,
    .tabs-below > .nav-tabs > .active > a:focus {
    border-color: transparent #ddd #ddd #ddd;
    }

    .tabs-left > .nav-tabs > li,
    .tabs-right > .nav-tabs > li {
    float: none;
    }

    .tabs-left > .nav-tabs > li > a,
    .tabs-right > .nav-tabs > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
    }

    .tabs-left > .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
    }

    .tabs-left > .nav-tabs > li > a {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    }

    .tabs-left > .nav-tabs > li > a:hover,
    .tabs-left > .nav-tabs > li > a:focus {
    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
    }

    .tabs-left > .nav-tabs .active > a,
    .tabs-left > .nav-tabs .active > a:hover,
    .tabs-left > .nav-tabs .active > a:focus {
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #ffffff;
    }

    .tabs-right > .nav-tabs {
    float: right;
    margin-left: 19px;
    border-left: 1px solid #ddd;
    }

    .tabs-right > .nav-tabs > li > a {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    }

    .tabs-right > .nav-tabs > li > a:hover,
    .tabs-right > .nav-tabs > li > a:focus {
    border-color: #eeeeee #eeeeee #eeeeee #dddddd;
    }

    .tabs-right > .nav-tabs .active > a,
    .tabs-right > .nav-tabs .active > a:hover,
    .tabs-right > .nav-tabs .active > a:focus {
    border-color: #ddd #ddd #ddd transparent;
    *border-left-color: #ffffff;
    }

    h3 {
        margin-bottom: 10px; 
    }

    #opened_per_month_2, #active_per_month, #accepted_per_month_2, #opened_per_week_2, #accepted_per_week_2 {height: 300px}
{% endblock %}
{% block content %}
    {{ block.super }}
    <div class="col-md-12">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <div class="clearfix">
                        <h3 {% if not critical_prods %}class="has-filters" {% endif %}>
                            {{ name }}
                            {% comment %} {% if not critical_prods %}
                                <div class="dropdown pull-right"></div>
                            {% endif %} {% endcomment %}
                            {% if not critical_prods %}
                                <div class="dropdown pull-right">
                                    <button id="show-filters" aria-label="Filters" data-toggle="collapse" data-target="#the-filters" class="btn btn-primary toggle-filters"> <i class="fa-solid fa-filter"></i> <i class="caret"></i> </button>
                                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                                            data-toggle="dropdown" label="view_selector" aria-label="view_selector" aria-expanded="true">
                                        <span class="fa-solid fa-bars"></span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                                        <li role="presentation">
                                            <a href="{% url 'metrics_product_type' %}?type=Finding">
                                                <i class="fa-solid fa-file-lines"></i> {% trans "Measures Findings" %}
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a href="{% url 'metrics_product_type' %}?type=Endpoint">
                                                <i class="fa-solid fa-file-lines"></i> {% trans "Measure Affected Endpoints" %}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            {% endif %}
                        </h3>
                    </div>
                </div>
                <div id="the-filters" class="is-filters panel-body collapse">
                    {% include "dojo/filter_snippet.html" with form=form clear_link="/metrics/product/type" %}
                </div>
            </div>
        </div>
    </div>

    <div class="row metric-data">
        <div class="col-md-12">
            {% if critical_prods %}
                <div class="row">
                    {% for c_prod in critical_prods %}
                        <div class='col-md-4' align="center">
                            <h3>{{ c_prod.name }} </h3>
                            <div aria-label="Health gauge for {{ c_prod.name }}" aria-describedby="gauge-description-{{ c_prod.id }}" style="display:inline-block;" class="gaugeloop 200x160px"
                                name="{{ c_prod.name }}" id="{{ c_prod.name }}{{ c_prod.id }}" role="img" start="{{ c_prod.calc_health }}"
                                tabindex="0">
                            </div>
                            <p id="gauge-description-{{ c_prod.id }}" class="sr-only">
                                {% blocktrans with name=c_prod.name health=c_prod.calc_health %}
                                The security health score for {{ name }} is {{ health }} percent.
                                {% endblocktrans %}
                            </p>
                            <div>
                                {% if c_prod.critical_present and c_prod.high_present %}
                                    <p>{% blocktranslate with name=c_prod.name%}{{ name }} is affected by <b>both</b> critical and
                                        high severity vulnerabilities.{% endblocktranslate %} </p>
                                    <p>
                                        <a href="{{ url_prefix }}/finding/open?title=&date=&severity=Critical&mitigated_by=&last_reviewed_by=&last_reviewed=&test__engagement__product__prod_type={{ c_prod.id }}&o=numerical_severity&page_size=25">
                                            {% trans "Critical Severity Vulnerabilities" %}</a></p>
                                    <p>
                                        <a href="{{ url_prefix }}/finding/open?title=&date=&severity=High&mitigated_by=&last_reviewed_by=&last_reviewed=&test__engagement__product__prod_type={{ c_prod.id }}&o=numerical_severity&page_size=25">
                                            {% trans "High Severity Vulnerabilities" %}</a></p>
                                {% elif c_prod.critical_present %}
                                    <p>{% blocktranslate with name=c_prod.name%}
                                        {{ name }} is affected by critical vulnerabilities.{% endblocktranslate %}
                                    </p>
                                    <p>
                                        <a href="{{ url_prefix }}/finding/open?title=&date=&severity=Critical&mitigated_by=&last_reviewed_by=&last_reviewed=&test__engagement__product__prod_type={{ c_prod.id }}&o=numerical_severity&page_size=25">
                                            {% trans "Critical Severity Vulnerabilities" %}</a></p>
                                {% elif c_prod.high_present %}
                                    <p>{% blocktranslate with name=c_prod.name%}
                                        {{ name }} is affected by high severity vulnerabilities.{% endblocktranslate %}
                                    </p>
                                    <p>
                                        <a href="{{ url_prefix }}/finding/open?title=&date=&severity=High&mitigated_by=&last_reviewed_by=&last_reviewed=&test__engagement__product__prod_type={{ c_prod.id }}&o=numerical_severity&page_size=25">
                                            {% trans "High Severity Vulnerabilities" %}</a></p>
                                {% endif %}
                                <p>
                                    <a href='{{ url_prefix }}/metrics/product/type?date=2&test__engagement__product__prod_type={{ c_prod.id }}&status='>
                                        {% trans "Full Metrics" %}</a></p></div>
                            <br>
                        </div>
                    {% endfor %}
                </div>
            {% elif name == labels.ASSET_METRICS_CRITICAL_LABEL %}
                <div class="row">
                    <div class="col-lg-6">
                        <h3><b>{{ labels.ASSET_METRICS_NO_CRITICAL_ERROR_MESSAGE }}</b></h3>
                    </div>
                </div>
            {% endif %}

            <div class="row">
                {% if opened_per_month %}
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">{% trans "Open Bug Count by Month" %}</div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <div aria-describedby="opened_per_month_2-description" aria-labelledby="opened-per-month-title" id="opened_per_month_2" role="img" tabindex="0">
                                </div>
                                <div class="sr-only">
                                    <h3 id="opened-per-month-title">{% trans "Open bug count by month" %}</h3>
                                    <p id="opened-per-month-description">
                                        {% trans "This line chart represents the number of open bugs over time, categorized by severity.
                                        The x-axis represents months, while the y-axis represents the number of open bugs.
                                        The table below provides the same data in text format." %}
                                    </p>
                                    <table id="opened-per-month-table" aria-labelledby="opened-per-month-title" tabindex="0">
                                        <caption>{% trans "Open bug count breakdown" %}</caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">{% trans "Month" %}</th>
                                                <th scope="col">{% trans "Critical" %}</th>
                                                <th scope="col">{% trans "High" %}</th>
                                                <th scope="col">{% trans "Medium" %}</th>
                                                <th scope="col">{% trans "Low" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for month in opened_per_month %}
                                            <tr>
                                                <td scope="row">{{ month.grouped_date|date:"F Y" }}</td>
                                                <td>{{ month.critical|default:"0" }}</td>
                                                <td>{{ month.high|default:"0" }}</td>
                                                <td>{{ month.medium|default:"0" }}</td>
                                                <td>{{ month.low|default:"0" }}</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>                    
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                    </div>
                {% endif %}
                {% if active_per_month %}
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">{% trans "Active Bug Count by Month" %}</div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <div
                                aria-labelledby="active-per-month-title"
                                aria-describedby="active-per-month-description"
                                id="active_per_month"
                                role="img"
                                tabindex="0">
                            </div>
                            <div class="sr-only">
                                <h3 id="active-per-month-title">{% trans "Active Bug Count by Month" %}</h3>
                                <p id="active-per-month-description">
                                    {% trans "This graph represents the number of active bugs per month categorized by severity.
                                    The x-axis represents months, and the y-axis represents the number of active bugs.
                                    The table below provides the same data in text format." %}
                                </p>
                                <table id="active-per-month-table" aria-labelledby="active-per-month-title" tabindex="0">
                                    <caption>{% trans "Active bug count breakdown" %}</caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">{% trans "Month" %}</th>
                                            <th scope="col">{% trans "Critical" %}</th>
                                            <th scope="col">{% trans "High" %}</th>
                                            <th scope="col">{% trans "Medium" %}</th>
                                            <th scope="col">{% trans "Low" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for month in active_per_month %}
                                        <tr>
                                            <td>{{ month.grouped_date|date:"F Y" }}</td> 
                                            <td>{{ month.critical|default:"0" }}</td>
                                            <td>{{ month.high|default:"0" }}</td>
                                            <td>{{ month.medium|default:"0" }}</td>
                                            <td>{{ month.low|default:"0" }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                {% endif %}
                {% if accepted_per_month %}
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                {% trans "Risk Accepted Bug Count by Month" %}
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <div
                                aria-labelledby="accepted-per-month-title"
                                aria-describedby="accepted-per-month-description"
                                id="accepted_per_month_2"
                                role="img"
                                tabindex="0">
                                </div>
                                <div class="sr-only">
                                    <h3 id="accepted-per-month-title">{% trans "Risk accepted bug count by month" %}</h3>
                                    <p id="accepted-per-month-description">
                                        {% trans "This graph represents the number of risk accepted bugs per month categorized by severity.
                                        The x-axis represents months, and the y-axis represents the number of risk-accepted bugs.
                                        The table below provides the same data in text format." %}
                                    </p>
                                    <table id="accepted-per-month-table" aria-labelledby="accepted-per-month-title" tabindex="0">
                                        <caption>{% trans "Risk Accepted Bug Count Breakdown" %}</caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">{% trans "Month" %}</th>
                                                <th scope="col">{% trans "Critical" %}</th>
                                                <th scope="col">{% trans "High" %}</th>
                                                <th scope="col">{% trans "Medium" %}</th>
                                                <th scope="col">{% trans "Low" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for month in accepted_per_month %}
                                            <tr>
                                                <td>{{ month.grouped_date|date:"F Y" }}</td> 
                                                <td>{{ month.critical|default:"0" }}</td>
                                                <td>{{ month.high|default:"0" }}</td>
                                                <td>{{ month.medium|default:"0" }}</td>
                                                <td>{{ month.low|default:"0" }}</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                {% endif %}
                {% if not critical_prods %}
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                {% trans "Open Bug Count by Week" %}
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <div
                                aria-labelledby="opened-per-week-title"
                                aria-describedby="opened-per-week-description"
                                id="opened_per_week_2"
                                role="img"
                                tabindex="0">
                                </div>
                                <div class="sr-only">
                                    <h3 id="opened-per-week-title">{% trans "Open bug count by week" %}</h3>
                                    <p id="opened-per-week-description">
                                        {% trans "This graph represents the number of open bugs per week categorized by severity.
                                        The x-axis represents weeks, and the y-axis represents the number of open bugs.
                                        The table below provides the same data in text format." %}
                                    </p>
                                    <table id="opened-per-week-table" aria-labelledby="opened-per-week-title" tabindex="0">
                                        <caption>{% trans "Open bug count breakdown by week" %}</caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">{% trans "Week" %}</th>
                                                <th scope="col">{% trans "Critical" %}</th>
                                                <th scope="col">{% trans "High" %}</th>
                                                <th scope="col">{% trans "Medium" %}</th>
                                                <th scope="col">{% trans "Low" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for week in opened_per_week %}
                                            <tr>
                                                <td>{{ week.grouped_date|date:"W Y" }}</td> 
                                                <td>{{ week.critical|default:"0" }}</td>
                                                <td>{{ week.high|default:"0" }}</td>
                                                <td>{{ week.medium|default:"0" }}</td>
                                                <td>{{ week.low|default:"0" }}</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                {% trans "Risk Accepted Bug Count by Week" %}
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <div
                                aria-labelledby="accepted-per-week-title"
                                aria-describedby="accepted-per-week-description"
                                id="accepted_per_week_2"
                                role="img"
                                tabindex="0"
                                ></div>
                                <div class="sr-only">
                                    <h3 id="accepted-per-week-title">{% trans "Risk Accepted Bug Count by Week" %}</h3>
                                    <p id="accepted-per-week-description">
                                        {% trans "This graph represents the number of risk-accepted bugs per week categorized by severity.
                                        The x-axis represents weeks, and the y-axis represents the number of accepted bugs.
                                        The table below provides the same data in text format." %}
                                    </p>
                                    <table id="accepted-per-week-table" aria-labelledby="accepted-per-week-title" tabindex="0">
                                        <caption>{% trans "Risk Accepted Bug Count Breakdown by Week" %}</caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">{% trans "Week" %}</th>
                                                <th scope="col">{% trans "Critical" %}</th>
                                                <th scope="col">{% trans "High" %}</th>
                                                <th scope="col">{% trans "Medium" %}</th>
                                                <th scope="col">{% trans "Low" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for week in accepted_per_week %}
                                            <tr>
                                                <td>{{ week.grouped_date|date:"W Y" }}</td> 
                                                <td>{{ week.critical|default:"0" }}</td>
                                                <td>{{ week.high|default:"0" }}</td>
                                                <td>{{ week.medium|default:"0" }}</td>
                                                <td>{{ week.low|default:"0" }}</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                    </div>
                    </div>
                    </div>
                    <div class="row" id="metric_counts">
                        <div class="col-md-12">
                            <h3>{% trans "Metric Counts" %}</h3>
                        </div>
                        <div class="col-md-12">
                            <div class="tabbable tabs-left">
                                <ul class="nav nav-tabs">
                                    {% if top_ten_products %}
                                        <li class="active">
                                            <a data-toggle="tab" href="#tabs-1">
                                                {{ labels.ASSET_METRICS_TOP_TEN_BY_SEVERITY_LABEL }}
                                            </a>
                                        </li>
                                    {% endif %}
                                    <li><a data-toggle="tab" href="#tabs-2">{% trans "Detail Breakdown" %}</a></li>
                                    <li><a data-toggle="tab" href="#tabs-3">{% trans "Opened Findings" %}</a></li>
                                    <li><a data-toggle="tab" href="#tabs-4">{% trans "Accepted Findings" %}</a></li>
                                    <li><a data-toggle="tab" href="#tabs-5">{% trans "Closed Findings" %}</a></li>
                                    <li><a data-toggle="tab" href="#tabs-6">{% trans "Trending Open<br/>Bug Count" %}
                                    </a></li>
                                    <li><a data-toggle="tab" href="#tabs-7">{% trans "Trending Accepted <br/> Bug Count" %}
                                    </a></li>
                                    <li><a data-toggle="tab" href="#tabs-8">{% trans "Age of Issues" %}</a></li>
                                </ul>
                                <div class="tab-content">
                                    {% if top_ten_products %}
                                        <div class="table-responsive tab-pane active" id="tabs-1">
                                            <table
                                                    class="table table-bordered table-condensed table-striped table-400">
                                                <tr>
                                                    <th>{{ labels.ASSET_LABEL }}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                {% for t in top_ten_products %}
                                                    <tr>
                                                        <td><a href="{% url 'view_product' t.id %}">{{ t.name }}</a>
                                                        </td>
                                                        <td class="text-right">{{ t.critical|default_if_none:0 }}</td>
                                                        <td class="text-right">{{ t.high|default_if_none:0 }}</td>
                                                        <td class="text-right">{{ t.medium|default_if_none:0 }}</td>
                                                        <td class="text-right">{{ t.low|default_if_none:0 }}</td>
                                                        <td class="text-right">{{ t.total|default_if_none:0 }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                    {% endif %}
                                    <div class="tab-pane table-responsive" id="tabs-2">
                                        {% if findings.count > max_findings_details %}
                                        <div>
                                            <em>Note:</em> {{ max_findings_details }} Findings listed of {{ findings.count }} total.
                                        </div>
                                        {% endif %}
                                        <table class="table table-bordered table-condensed table-striped table-600">
                                            <tr>
                                                <th class="nowrap">{% trans "Team" %}</th>
                                                <th class="">{{ labels.ASSET_LABEL }}</th>
                                                <th>{% trans "Severity" %}</th>
                                                <th>{% trans "EPSS Score / Percentile" %}</th>
                                                <th>{% trans "Description" %}</th>
                                                <th class="nowrap">{% trans "Days<br/>Open" %}</th>
                                                <th class="nowrap">{% trans "Status" %}</th>
                                                <th class="nowrap">{% trans "Reporter" %}</th>

                                            </tr>
                                            {% for finding in findings|slice:max_findings_details %}
                                                <tr>
                                                    <td>{{ finding.test.engagement.product.prod_type.name }}</td>
                                                    <td>
                                                        <span title="{{ finding.test.engagement.product.name }}">
                                                            {{ finding.test.engagement.product.name|truncatechars_html:20 }}
                                                        </span>
                                                    </td>
                                                    <td>{{ finding.severity_display }}</td>
                                                    <td class="text-right">
                                                        {{ finding.epss_score|format_epss }}
                                                        /
                                                        {{ finding.epss_percentile|format_epss }}
                                                    </td>
                                                    <td><a href="{% url 'view_finding' finding.id %}"
                                                           title="{{ finding.title }}">{{ finding.title|truncatechars_html:20 }}</a>
                                                    </td>
                                                    <td class="text-right">{{ finding.age }}</td>
                                                    <td>{{ finding.status }}</td>
                                                    <td>{{ finding.reporter }}</td>
                                                </tr>
                                            {% endfor %}
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="tabs-3">
                                        <div class="table-responsive">
                                            <h4>{% trans "Opened During Period" %}</h4>
                                            <table
                                                    class="table table-bordered table-condensed table-striped table-600">
                                                <tr>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                <tr>
                                                    <td class="text-right">{{ in_period_counts.critical }}</td>
                                                    <td class="text-right">{{ in_period_counts.high }}</td>
                                                    <td class="text-right">{{ in_period_counts.medium }}</td>
                                                    <td class="text-right">{{ in_period_counts.low }}</td>
                                                    <td class="text-right">{{ in_period_counts.info }}</td>
                                                    <td class="text-right">{{ in_period_counts.total }}</td>
                                                </tr>
                                            </table>
                                            <table
                                                    class="table table-bordered table-condensed table-striped table-600">
                                                <tr>
                                                    <th>{{ labels.ASSET_LABEL }}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                {% for product in in_period_details %}
                                                    <tr>
                                                        <td>
                                                            <a href="{% url 'product_open_findings' product.product_id %}">
                                                                {{ product.product_name }}
                                                            </a>
                                                        </td>
                                                        <td class="text-right">{{ product.critical }}</td>
                                                        <td class="text-right">{{ product.high }}</td>
                                                        <td class="text-right">{{ product.medium }}</td>
                                                        <td class="text-right">{{ product.low }}</td>
                                                        <td class="text-right">{{ product.info }}</td>
                                                        <td class="text-right">{{ product.total }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tabs-4">
                                        <div class="table-responsive">
                                            <h4>{% trans "Accepted in Period" %}</h4>
                                            <table
                                                    class="table table-bordered table-condensed table-striped table-600">
                                                <tr>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                <tr>
                                                    <td class="text-right">{{ accepted_in_period_counts.critical|default_if_none:0 }}</td>
                                                    <td class="text-right">{{ accepted_in_period_counts.high|default_if_none:0 }}</td>
                                                    <td class="text-right">{{ accepted_in_period_counts.medium|default_if_none:0 }}</td>
                                                    <td class="text-right">{{ accepted_in_period_counts.low|default_if_none:0 }}</td>
                                                    <td class="text-right">{{ accepted_in_period_counts.info|default_if_none:0 }}</td>
                                                    <td class="text-right">{{ accepted_in_period_counts.total|default_if_none:0 }}</td>
                                                </tr>
                                            </table>
                                            <table
                                                    class="table table-bordered table-condensed table-striped table-600">
                                                <tr>
                                                    <th>{{ labels.ASSET_LABEL }}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                {% for product in accepted_in_period_details %}
                                                    <tr>
                                                        <td>
                                                            <a href="{% url 'accepted_findings' %}?test__engagement__product={{ product.product_id }}">
                                                                {{ product.product_name }}
                                                            </a>
                                                        </td>
                                                        <td class="text-right">{{ product.critical }}</td>
                                                        <td class="text-right">{{ product.high }}</td>
                                                        <td class="text-right">{{ product.medium }}</td>
                                                        <td class="text-right">{{ product.low }}</td>
                                                        <td class="text-right">{{ product.info }}</td>
                                                        <td class="text-right">{{ product.total }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                        </div>


                                    </div>
                                    <div class="tab-pane" id="tabs-5">
                                        <div class="table-responsive">
                                            <h4>{% trans "Closed in Period" %}</h4>
                                            <table
                                                    class="table table-bordered table-condensed table-striped table-600">
                                                <tr>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                <tr>
                                                    <td class="text-right">{{ closed_in_period_counts.critical }}</td>
                                                    <td class="text-right">{{ closed_in_period_counts.high }}</td>
                                                    <td class="text-right">{{ closed_in_period_counts.medium }}</td>
                                                    <td class="text-right">{{ closed_in_period_counts.low }}</td>
                                                    <td class="text-right">{{ closed_in_period_counts.info }}</td>
                                                    <td class="text-right">{{ closed_in_period_counts.total }}</td>
                                                </tr>
                                            </table>
                                            <table
                                                    class="table table-bordered table-condensed table-striped table-600">
                                                <tr>
                                                    <th>{{ labels.ASSET_LABEL }}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>

                                                </tr>
                                                {% for product in closed_in_period_details %}
                                                    <tr>
                                                        <td>
                                                            <a href="{% url 'closed_findings' %}?test__engagement__product={{ product.product_id }}">
                                                                {{ product.product_name }}
                                                            </a>
                                                        </td>
                                                        <td class="text-right">{{ product.critical }}</td>
                                                        <td class="text-right">{{ product.high }}</td>
                                                        <td class="text-right">{{ product.medium }}</td>
                                                        <td class="text-right">{{ product.low }}</td>
                                                        <td class="text-right">{{ product.info }}</td>
                                                        <td class="text-right">{{ product.total }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tabs-6">
                                        <div class="metric-half table-responsive">
                                            <table class="table table-bordered table-condensed table-striped">
                                                <tr>
                                                    <th>{% trans "Weekly" %}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                    <th>{% trans "Closed*" %}</th>
                                                </tr>
                                                {% for week in opened_per_week %}
                                                    <tr>
                                                        <td>{{ week.grouped_date|date:"m-d-Y" }}</td>
                                                        <td class="text-right">{{ week.critical }}</td>
                                                        <td class="text-right">{{ week.high }}</td>
                                                        <td class="text-right">{{ week.medium }}</td>
                                                        <td class="text-right">{{ week.low }}</td>
                                                        <td class="text-right">{{ week.info }}</td>
                                                        <td class="text-right">{{ week.total }}</td>
                                                        <td class="text-right">{{ week.closed }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                        <div class="metric-half table-responsive">
                                            <table class="table table-bordered table-condensed table-striped">
                                                <tr>
                                                    <th>{% trans "Monthly" %}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                    <th>{% trans "Closed*" %}</th>
                                                </tr>
                                                {% for month in opened_per_month %}
                                                    <tr>
                                                        <td class>{{ month.grouped_date|date:"m-Y" }}</td>
                                                        <td class="text-right">{{ month.critical }}</td>
                                                        <td class="text-right">{{ month.high }}</td>
                                                        <td class="text-right">{{ month.medium }}</td>
                                                        <td class="text-right">{{ month.low }}</td>
                                                        <td class="text-right">{{ month.info }}</td>
                                                        <td class="text-right">{{ month.total }}</td>
                                                        <td class="text-right">{{ month.closed }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                            <p>{% trans "*Closed findings may have been opened outside of requested period." %}</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tabs-7">
                                        <div class="metric-half table-responsive">
                                            <table class="table table-bordered table-condensed table-striped">
                                                <tr>
                                                    <th>{% trans "By Week" %}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                {% for week in accepted_per_week %}
                                                    <tr>
                                                        <td>{{ week.grouped_date|date:"m-d-Y" }}</td>
                                                        <td class="text-right">{{ week.critical }}</td>
                                                        <td class="text-right">{{ week.high }}</td>
                                                        <td class="text-right">{{ week.medium }}</td>
                                                        <td class="text-right">{{ week.low }}</td>
                                                        <td class="text-right">{{ week.info }}</td>
                                                        <td class="text-right">{{ week.total }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                        <div class="metric-half table-responsive">
                                            <table class="table table-bordered table-condensed table-striped">
                                                <tr>
                                                    <th>{% trans "By Month" %}</th>
                                                    <th>{% trans "Critical" %}</th>
                                                    <th>{% trans "High" %}</th>
                                                    <th>{% trans "Medium" %}</th>
                                                    <th>{% trans "Low" %}</th>
                                                    <th>{% trans "Info" %}</th>
                                                    <th>{% trans "Total" %}</th>
                                                </tr>
                                                {% for month in accepted_per_month %}
                                                    <tr>
                                                        <td>{{ month.grouped_date|date:"m-Y" }}</td>
                                                        <td class="text-right">{{ month.critical }}</td>
                                                        <td class="text-right">{{ month.high }}</td>
                                                        <td class="text-right">{{ month.medium }}</td>
                                                        <td class="text-right">{{ month.low }}</td>
                                                        <td class="text-right">{{ month.info }}</td>
                                                        <td class="text-right">{{ month.total }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane table-responsive" id="tabs-8">
                                        <table
                                                class="table table-bordered table-condensed table-striped table-400">
                                            <tr>
                                                <th>{% trans "Days" %}</th>
                                                <th>{% trans "Bug Count" %}</th>
                                            </tr>
                                            <tr>
                                                <td>{% trans "0 - 30 Days" %}</td>
                                                <td class="text-right">{{ age_detail.age_under_30 }}</td>
                                            </tr>
                                            <tr>
                                                <td>{% trans "31 - 60 Days" %}</td>
                                                <td class="text-right">{{ age_detail.age_31_60 }}</td>
                                            </tr>
                                            <tr>
                                                <td>{% trans "61 - 90 Days" %}</td>
                                                <td class="text-right">{{ age_detail.age_61_90 }}</td>
                                            </tr>
                                            <tr>
                                                <td>{% trans "91+ Days" %}</td>
                                                <td class="text-right">{{ age_detail.age_90_plus }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block postscript %}
    {{ block.super }}
    <!-- Flot Charts JavaScript -->
    <script src="{% static "flot/excanvas.min.js" %}"></script>
    <script src="{% static "flot/jquery.flot.js" %}"></script>
    <script src="{% static "flot/jquery.flot.pie.js" %}"></script>
    <script src="{% static "flot/jquery.flot.resize.js" %}"></script>
    <script src="{% static "flot/jquery.flot.time.js" %}"></script>
    <script src="{% static "jquery.flot.tooltip/js/jquery.flot.tooltip.min.js" %}"></script>
    <script src="{% static "flot/jquery.flot.stack.js" %}"></script>
    {% include "dojo/filter_js_snippet.html" %}
    <script src="{% static "justgage/raphael.min.js" %}"></script>
    <script src="{% static "justgage/justgage.js" %}"></script>
    {% block metrics %}
        <script src="{% static "dojo/js/metrics.js" %}"></script>
    {% endblock metrics %}
    <script>
        $('.gaugeloop').each(function () {
            j_obj = $(this);
            var g_id = j_obj.attr('id');
            var g_title = j_obj.attr('name');
            var g_start = j_obj.attr('start');
            var g = new JustGage({
                id: g_id,
                value: g_start,
                levelColors: ["#FF0000", "#F9C802", "#A9D70B"],
                min: 0,
                max: 100,
            });
        });
        $(function () {
            {% if not show_pt_filter %}
                $('#id_test__engagement__product__prod_type').parents('p').remove();
            {% endif %}

            var critical = [];
            var high = [];
            var medium = [];
            var low = [];
            {% for month in opened_per_month %}
                critical.push([{{ month.epoch }}, {{ month.critical }}]);
                high.push([{{ month.epoch }}, {{ month.high }}]);
                medium.push([{{ month.epoch }}, {{ month.medium }}]);
                low.push([{{ month.epoch }}, {{ month.low }}]);
            {% endfor %}
            {% if opened_per_month %}
                opened_per_month_2(critical, high, medium, low);
            {% endif %}

            critical = [];
            high = [];
            medium = [];
            low = [];
            {% for month in active_per_month %}
                critical.push([{{ month.epoch }}, {{ month.critical }}]);
                high.push([{{ month.epoch }}, {{ month.high }}]);
                medium.push([{{ month.epoch }}, {{ month.medium }}]);
                low.push([{{ month.epoch }}, {{ month.low }}]);
            {% endfor %}
            {% if active_per_month %}
                active_per_month(critical, high, medium, low);
            {% endif %}

            critical = [];
            high = [];
            medium = [];
            low = [];
            {% for month in accepted_per_month %}
                critical.push([{{ month.epoch }}, {{ month.critical }}]);
                high.push([{{ month.epoch }}, {{ month.high }}]);
                medium.push([{{ month.epoch }}, {{ month.medium }}]);
                low.push([{{ month.epoch }}, {{ month.low }}]);
            {% endfor %}
            {%  if accepted_per_month %}
                accepted_per_month_2(critical, high, medium, low);
            {%  endif %}

            critical = [];
            high = [];
            medium = [];
            low = [];
            var critical1 = [];
            var high1 = [];
            var medium1 = [];
            var low1 = [];
            {% for week in opened_per_week %}
                critical.push([{{ week.epoch }}, {{ week.critical }}]);
                high.push([{{ week.epoch }}, {{ week.high }}]);
                medium.push([{{ week.epoch }}, {{ week.medium }}]);
                low.push([{{ week.epoch }}, {{ week.low }}]);
            {% endfor %}
            {% for week in accepted_per_week %}
                critical1.push([{{ week.epoch }}, {{ week.critical }}]);
                high1.push([{{ week.epoch }}, {{ week.high }}]);
                medium1.push([{{ week.epoch }}, {{ week.medium }}]);
                low1.push([{{ week.epoch }}, {{ week.low }}]);
            {% endfor %}
            {% if not critical_prods %}
                opened_per_week_2(critical, high, medium, low);
                accepted_per_week_2(critical1, high1, medium1, low1);
            {% endif %}
        });
    </script>
{% endblock %}